<template>
	<section>
		<div class=" experience-sucess-contain bg-f5">
			<div class="align-center top-content pl30rem pr30rem pb30 pt30rem bg-white">
				<i class="iconfont icon-wancheng fs72 sucess-color"></i>
				<div class="mt15rem fs16">
					您已预约体验，请耐心等待审核
				</div>
				<div class="m15rem c69">	
					{{end_time*1000,"MM月dd日 hh:mm"| formatDate }} 结束
				</div>
				<div class="mt30rem layout ">
					<button
						@click="goBack"
						class="sucess-color pt10rem pb10rem flex_1 radius mr15 success-border"
					>
						<template v-if="yushou_status == 1">
							火热预售中，前往预定
						</template>
						<template v-else>
							更多免费体验机会
						</template>
					</button>
					<router-link 
						tag="button" 
						to="/ordering/detail/Ordering-nav/19?type=2"
						class="white sucess-bg pt10rem pb10rem flex_1 radius success-border"
					>
						更多新品预售
					</router-link>
				</div>					
			</div>			
			<div class="pt30rem bottom-content ">
				<p class="align-center fs16 mb30rem">
					更多推荐
				</p>				
				<recommend-list></recommend-list>
			</div>			
		</div>		
	</section>
</template>

<script>

	import { getRecommand }  from "@/api/home";	
	import { formatDate } from "@/utils/index";
	import Countdown      from '@/components/Countdown';	
	import RecommendList from '@/components/recommend-list';
	export default{
		components:{
			Countdown,
			RecommendList
		},
		data()
		{
			return{
				goods_list : null,
				img_url    : process.env.IMG_URL,
				goods_id   : this.$route.query.goods_id,
				end_time   : this.$route.query.time,
				yushou_status : this.$route.query.yushou_status
			}
		},
		filters:{
			formatDate(date, fmt)
			{
				let time = new Date(date);
				return formatDate(time,fmt);
			}
		},
		methods:
		{
			goBack()
			{	
				if(this.yushou_status == 1)
					this.$router.replace('/detail/experience-detail/'+ this.goods_id + '?status=2');
				else
				{
					this.$router.replace('/');
				}
			}
		},
	}
</script>

<style lang="less">
	.experience-sucess-contain{
		.list-ul{
			overflow: hidden;
			li{
				width: 48%;
				.count-down{
					span{
						background-color: #383838;
					}
					strong{
						i{
							background-color: #383838;
						}
					}
				}
				.experience{
		    		border-radius: 5/28rem;
		    		background-color: #ffdee5;
		    		padding:2/28rem 5/28rem;
		    		vertical-align: top;
	    		}
			}
		}
		.top-content{
			// height: 29vh;
			// background-color: pink;
		}
		.bottom-content{
			// height: 71vh;
		}
		.fs72{
			font-size: 72px;
		}
		.sucess-color{
			color: #6BDF59;
		}
		.sucess-bg{
			background-color: #6BDF59;
		}
		.success-border{
			border:1px solid #6BDF59;
		}
	}
	
</style>